<template>
  <div class="picacg">
    <ul
      class="list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false"
    >
      <li
        class="card"
        ref="card"
        @click="datail(index)"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <img v-lazy="item.vod_pic" />
        <div class="name">
          {{ item.vod_name }}
        </div>
      </li>
    </ul>
    <footer>
      <mt-spinner
        type="double-bounce"
        :size="30"
        color="rgb(200, 200, 200)"
      ></mt-spinner>
      <p>正在加载中...</p>
    </footer>
    <div class="go-top" v-show="isShow" @click="goTop()">
      <svg
        t="1585857497656"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="647"
        width="200"
        height="200"
      >
        <path
          d="M656.551271 845.731014a52.448287 51.260065 90 0 1-51.108699 52.190965H297.526475a52.243943 51.055721 90 0 1-51.10113-52.243943V478.252432H92.387829c-56.3838 0-69.711569-33.202112-29.629876-74.275251L415.326993 43.211678a52.607221 51.41143 90 0 1 72.375608 0l352.561472 360.87146c40.089261 40.914205 26.81447 74.222273-29.728265 74.222272H656.551271V845.731014z"
          p-id="648"
          fill="#bfbfbf90"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isShow: true,
      loading: false,
      dataList: [],
      page: 1
    };
  },
  mounted() {
    axios.get(`/home/?apppage=index&pg=${this.page}`).then(res => {
      res.data.list.forEach(re => {
        if (re.vod_id != -1) {
          this.dataList.push(re);
        }
      });
    });
  },
  computed: {},
  methods: {
    datail() {
      //TODO
    },
    goTop() {
      (function smoothscroll() {
        var currentScroll =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
          window.requestAnimationFrame(smoothscroll);
          window.scrollTo(0, currentScroll - currentScroll / 5);
        }
      })();
    },
    loadMore() {
      this.loading = true;
      this.page++;
      function sleep(time) {
        return new Promise(resolve => setTimeout(resolve, time));
      }
      sleep(1000).then(() => {
        axios.get(`/home/?apppage=index&pg=${this.page}`).then(res => {
          res.data.list.forEach(re => {
            if (re.vod_id != -1) {
              this.dataList.push(re);
              this.loading = false;
            }
          });
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.picacg {
  height: 100vh;
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    // background-color: chartreuse;
    .card {
      width: 45vw;
      margin: 0.3125rem 0.3125rem;
      box-sizing: border-box;
      // background-color: chocolate;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      img {
        width: 100%;
        height: 60vw;
        object-fit: cover;
      }
      image[lazy="loading"] {
        width: 2.5rem;
        height: 18.75rem;
        margin: auto;
      }
      .name {
        width: calc(100% - 0.625rem);
        height: 2.5rem;
        line-height: 1.25rem;
        margin-top: 0.3125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        align-self: flex-end;
      }
    }
  }
  footer {
    width: 100%;
    height: 1.875rem;
    display: flex;
    justify-content: center;
    align-self: center;
    p {
      margin-left: 0.3125rem;
      line-height: 1.875rem;
    }
  }
  .go-top {
    width: 3.125rem;
    height: 3.125rem;
    position: fixed;
    bottom: 1.875rem;
    right: 0.9375rem;
    border-radius: 10px;
    background-color: #cccccc90;
    overflow: hidden;
    cursor: pointer;
    .icon {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
